// 将程序定义在 加载事件中
$(function () {

  // 调用函数动态生成页面
  setPage();

  // 通过 事件委托 给 父级标签添加点击事件
  const oContainer = document.querySelector('.container');
  oContainer.addEventListener('click', event => {
      // 获取 购物车数据信息  
      // 将 json字符串 还原为 对应的数据结构
      let cart = JSON.parse(window.localStorage.cart);

      // 点击全选标签 
      if (event.target.getAttribute('name') === 'all') {
          // 获取 全选input标签 checked属性值
          // 设定给 购物车数据中 所有商品 buy 属性
          cart.forEach(item => {
              // 点击标签checked属性 赋值给 购物车商品buy属性存储 
              item.buy = event.target.checked;
          })


      } else if (event.target.getAttribute('name') === 'other') {
          // 循环遍历 购物车数据数组 
          // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
          // 设定 购物车商品的buy存储 点击标签checked属性值
          for (let i = 0; i <= cart.length - 1; i++) {
              // i 是 索引下标 
              // cart[i] 是 数值中存储的商品数据对象
              if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                  //  如果 数组中商品的goods_id 和 点击的商品的goods_id 相同
                  //  点击标签的checked属性值 赋值给 数组中商品boy属性
                  cart[i].buy = event.target.checked;

                  // 终止循环
                  break;
              }

          }

          // 如果点击的是 删除标签 
      } else if (event.target.getAttribute('name') === 'del') {
          // 弹出提示框 确定要删除 再执行程序
          if (window.confirm('您确定要删除吗') === false) return;


          // 循环遍历 购物车数据数组 
          // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
          // 删除 数组中这个商品数据对象 
          for (let i = 0; i <= cart.length - 1; i++) {
              // i 是 索引下标 
              // cart[i] 是 数值中存储的商品数据对象
              if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                  // 从 索引下标 i 开始 删除 1 个单元 
                  // 因为 当前数组没有存储重复数据 不需要考虑 数组坍塌造成的影响
                  cart.splice(i, 1);

                  // 终止循环
                  break;

              }

          }


          // 如果点击的是 - 标签 
      } else if (event.target.getAttribute('name') === '-') {
          // 循环遍历 购物车数据数组 
          // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
          // 购物车商品的num属性存储的数值累减1 
          for (let i = 0; i <= cart.length - 1; i++) {
              // i 是 索引下标 
              // cart[i] 是 数值中存储的商品数据对象
              if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                  // 购物车商品 num属性 累减1
                  cart[i].num--;

                  // 终止循环
                  break;

              }

          }

          // 如果点击的是 + 标签 
      } else if (event.target.getAttribute('name') === '+') {
          // 循环遍历 购物车数据数组 
          // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
          // 购物车商品的num属性存储的数值 累加1
          for (let i = 0; i <= cart.length - 1; i++) {
              // i 是 索引下标 
              // cart[i] 是 数值中存储的商品数据对象
              if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
                  // 购物车商品 num属性 累加1
                  cart[i].num++;

                  // 终止循环
                  break;

              }

          }
      }




      // 将 新数组的数据 写入 localStorage 中 
      window.localStorage.cart = JSON.stringify(cart);

      // 根据 新的 localStorage 中 存储的购物车数据 
      // 再次动态渲染生成页面
      setPage();
  })

})



// 封装一个函数 动态生成页面
function setPage() {
  // 1, 调用 localStorage 中 购物车数据信息
  let cart = window.localStorage.cart;

  // 2, 定义变量 存储 所有商品购买状态
  let bool = true;

  // 3, 定义变量 存储 购物数据
  let type = 0;
  let number = 0;
  let money = 0;

  // 如果 调用的结果是 undefined 
  if (cart === undefined) {
      // 证明 没有 购物车 键值对 
      // 也就是 第一次购物 还没有创建购物车信息

      $('.container').html('<h1>您是第一次来到本商城 还没有购物记录 您赶紧去放肆购物吧</h1>')

      // 如果 调用结果不是 undefined
  } else {
      // 证明 有 购物车 键值对 
      // json字符串 还原为对应的数据结构
      cart = JSON.parse(cart);

      // 判断 数组 是不是 空数组 
      if (cart.length === 0) {
          // 购物车是空数组 证明是 空车
          $('.container').html('<h1>您的购物车已经被好心人清空了 请您赶紧把购物车装满吧</h1>')



      } else {
          // 购物车不是空数组 有 商品数据 
          // 根据商品数据 动态渲染生成页面内容

          // li之前的固定内容
          let str = `
      <div class="panel panel-info ">
        <div class="panel-body bg-info">
          <div class="checkbox">
            <label>
              <input name="all" type="checkbox" value="">
              全选
            </label>
          </div>
        </div>
        <div class="panel-footer">
          <ul class="cart-list">
      `;

          // li是根据 localStorage 中 购物车数组 动态生成 

          cart.forEach(item => {
              // 循环遍历时 判断 item 中 存储的当前商品的购买状态
              // 如果有商品的购买状态是 false 变量 存储false 
              if (item.buy === false) {
                  bool = false;

                  // 当前商品的购买状态时 true 也就是 要购买
              } else {
                  // 计算 购买种类 数量 价格
                  type += 1;
                  number += item.num;
                  money += item.num * item.goods_price;

              }

              str += `
        <li class="cart-item">
          <div class="left">
            <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
          </div>
          <div class="right">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object"
                    src="${item.goods_small_logo}" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">${item.goods_name}</h4>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${item.goods_price}</span>
                </p>
                <div class="btn-group pull-right" role="group" aria-label="...">
                  <button name="-" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>                               
                  <button type="button" class="btn btn-default" disabled>${item.num}</button>
                  <button name="+" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num === Number(item.goods_number) ? 'disabled' : ''}>+</button>
                </div>
                <button  name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

              </div>
            </div>
          </div>
        </li>
        
        
        `;

          })



          // li之后的内容 是 固定内容
          str += `
          </ul>

          <div>
            <h1>您一共购买了 ${type}种 商品</h1>  
            <h1>您一共购买了 ${number}件 商品</h1>  
            <h1>您一共支付了 ${money.toFixed(2)}元 商品</h1>  
          </div>
        </div>
      </div>   
      `;

          // 将 生成的字符串 写入页面
          $('.container').html(str);

          // 将标签写入后 设定 全选标签的属性
          $('[name="all"]').prop('checked', bool);
      }


  }




}
